<template>
  <div class="course-list">
    <div class="course-item" v-for="(item, index) in courseList" :key="index">
      <!-- 左侧内容区域 -->
      <div class="course-info">
        <h3 class="course-title">{{ item.title }}</h3>
        <p class="course-meta">
          <span :class="getMetaColor(item.meta)">{{ item.meta }}</span>| 截止: {{ item.deadline }}
        </p>
      </div>
      <!-- 右侧状态按钮 -->
      <el-button :type="getButtonType(item.status)" size="mini">{{ item.statusText }}</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'

// 模拟课程列表数据（与设计稿完全匹配）
const courseList = [
  { title: '"医者仁心"专题学习', meta: '已学习: 180 分钟', deadline: '2025-11-30', status: 'done', statusText: '已完成' },
  { title: '医疗质量管理规范测试', meta: '已学习: 45 分钟', deadline: '2025-12-05', status: 'learning', statusText: '学习中' },
  { title: '党的二十大精神学习测试', meta: '已学习: 0 分钟', deadline: '2025-12-10', status: 'todo', statusText: '去学习' },
  { title: '医院感染防控专项培训', meta: '已学习: 90 分钟', deadline: '2025-12-15', status: 'learning', statusText: '学习中' },
  { title: '新版医疗机构管理条例解读', meta: '已学习: 0 分钟', deadline: '2025-12-20', status: 'todo', statusText: '去学习' },
  { title: '医疗安全事故防范培训', meta: '已学习: 150 分钟', deadline: '2025-12-25', status: 'done', statusText: '已完成' },
  { title: '医疗服务质量提升专题', meta: '已学习: 0 分钟', deadline: '2025-12-28', status: 'todo', statusText: '去学习' },
  { title: '医患沟通技巧提升课程', meta: '已学习: 60 分钟', deadline: '2025-12-30', status: 'learning', statusText: '学习中' },
  { title: '临床科研方法学专题', meta: '已学习: 120 分钟', deadline: '2025-01-05', status: 'done', statusText: '已完成' },
  { title: '医院信息化建设研讨', meta: '已学习: 0 分钟', deadline: '2025-01-10', status: 'todo', statusText: '去学习' },
  { title: '"医者仁心"专题学习', meta: '已学习: 180 分钟', deadline: '2025-11-30', status: 'done', statusText: '已完成' },
  { title: '医疗质量管理规范测试', meta: '已学习: 45 分钟', deadline: '2025-12-05', status: 'learning', statusText: '学习中' },
  { title: '党的二十大精神学习测试', meta: '已学习: 0 分钟', deadline: '2025-12-10', status: 'todo', statusText: '去学习' },
  { title: '医院感染防控专项培训', meta: '已学习: 90 分钟', deadline: '2025-12-15', status: 'learning', statusText: '学习中' },
  { title: '新版医疗机构管理条例解读', meta: '已学习: 0 分钟', deadline: '2025-12-20', status: 'todo', statusText: '去学习' },
  { title: '医疗安全事故防范培训', meta: '已学习: 150 分钟', deadline: '2025-12-25', status: 'done', statusText: '已完成' },
  { title: '医疗服务质量提升专题', meta: '已学习: 0 分钟', deadline: '2025-12-28', status: 'todo', statusText: '去学习' },
  { title: '医患沟通技巧提升课程', meta: '已学习: 60 分钟', deadline: '2025-12-30', status: 'learning', statusText: '学习中' },
  { title: '临床科研方法学专题', meta: '已学习: 120 分钟', deadline: '2025-01-05', status: 'done', statusText: '已完成' },
]

// 状态映射函数
const getButtonType = (status) => {
  return {
    done: 'success',   // 已完成（绿色）
    learning: 'warning',// 学习中（黄色）
    todo: 'danger'     // 去学习（红色）
  }[status]
}

// 元信息颜色映射
const getMetaColor = (meta) => {
  return meta.includes('0 分钟') ? 'text-red' : 'text-green'
}
</script>

<style scoped lang="scss">
.course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.course-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);

  .course-info {
    padding: 10px 0;
    .course-title {
      font-size: 18px;
      font-weight: bolder;
      margin: 0 0 4px;
      color: #333;
      padding-bottom: 5px;
    }

    .course-meta {
      font-size: 14px;
      color: #666;
      margin: 0;

      .text-red {
        color: #ff4d4f;
      }
      .text-green {
        color: #52c41a;
      }
    }
  }
}
</style>
